<template>
  <section
    v-loading="loading"
    class="section-task-details">
    <div>
      <header class="section-task-header">
        <div class="task-form-item">
          <el-button
            @click="submitDataHandler"
            type="primary"
          >立即提交审核
          </el-button>
        </div>
        <div class="task-form-item">
          <el-button
            @click="batchCancelHandler(true)"
            type="primary">批量取消定时
          </el-button>
        </div>
        <div class="task-form-item">
          <el-button
            @click="updAuditStatusHandler"
            type="primary">查看审核状态
          </el-button>
        </div>
        <!--      <div class="task-form-item">-->
        <!--        <el-checkbox>勾选所有媒体账号的全部广告计划</el-checkbox>-->
        <!--      </div>-->
        <!--      <div class="task-form-item">所有账号广告组数量：<span class="primary-text">10</span></div>-->
        <!--      <div class="task-form-item">定时任务数：<span class="primary-text">100</span></div>-->
        <!--      <div class="task-form-item">提交成功：<span class="success-text">30</span></div>-->
      </header>
      <div class="table-count">
        <div class="task-detail-header">
          <div class="task-form-item">
            <el-checkbox
              :indeterminate="tableData.indeterminate"
              v-model="tableData.checkAll"
              :disabled="tableData.disabled"
            >勾选此账户的全部广告组
            </el-checkbox>
            (已勾选{{ tableData.selectGroupCount }}个{{ !tableData.is_custom ? '广告组' : '创意' }})
          </div>
          <div class="task-form-item">{{ tableData.advertiser_alias }}</div>
          <div class="task-form-item">广告计划数量：<span class="primary-text">{{
              tableData.planCount
            }}</span></div>
          <div class="task-form-item">
            广告组数量：<span class="primary-text">
            {{ !tableData.is_custom ? tableData.groupCount : tableData.customGroupCount }}
             </span>
            <span v-if="!tableData.is_custom">
               (
              待提交数量：<i class="primary-text">{{ tableData.pendingCount }}</i> &nbsp;
              定时任务数量：<i class="primary-text">{{ tableData.timedCount }}</i>&nbsp;
              <!--              已提交数量：<i class="primary-text">{{ 4 }}</i>&nbsp;-->
              提交成功数量：<i class="primary-text">{{ tableData.successCount }}</i>&nbsp;
              提交失败数量：<i class="primary-text">{{ tableData.failedCount }}</i>
              )
          </span>
          </div>
          <div
            v-if="tableData.is_custom"
            class="task-form-item">
            广告创意数量：<span class="primary-text">{{ tableData.groupCount }}</span>
            <span>
              (
              待提交数量：<i class="primary-text">{{ tableData.pendingCount }}</i> &nbsp;
              定时任务数量：<i class="primary-text">{{ tableData.timedCount }}</i>&nbsp;
              <!--              已提交数量：<i class="primary-text">{{ 4 }}</i>&nbsp;-->
              提交成功数量：<i class="primary-text">{{ tableData.successCount }}</i>&nbsp;
              提交失败数量：<i class="primary-text">{{ tableData.failedCount }}</i>
              )
            </span>
          </div>
        </div>
        <!--   不是 自定义创建     -->
        <NoCustomTable
          ref="noCustomTableRef"
          v-if="!tableData.is_custom"
          :rowDataLists="tableRowLists"
          :data="tableData"
          @batchCancelHandler="batchCancelHandler"
          @delTask="delTask"
        />
        <!--    自定义创建    -->
        <CustomTable
          ref="customTableRef"
          v-else
          :rowDataLists="tableRowLists"
          :data="tableData"
          @batchCancelHandler="batchCancelHandler"
          @delTask="delTask"
        />
      </div>
    </div>
  </section>
</template>

<script>
import {
  defineComponent,
  reactive,
  toRefs,
  computed,
  watch,
} from 'vue';

import {
  useRoute,
  useRouter
} from 'vue-router';
import {ElMessage, ElMessageBox} from 'element-plus';
import {
  debounce,
  cloneDeep
} from 'lodash-es'
// import cloneDeep from 'lodash/cloneDeep'
import CustomTable from './CustomTable'
import NoCustomTable from './NoCustomTable'
// import TargetContentDetail from '@/components/targetContentDetail'
// 正常创建 单个广告组 unit_list下 ks_program_creative
// import programmaticData from './programmaticData.json'
// 自定义创建 单个广告组 unit_list下 ks_creative
// import programmaticData from './custom.json'
// 多个广告组 unit_list下 ks_creative
import programmaticData from './customN.json'

import {
  checkTaskStatus,
  cancelSubmitTask,
  delSubmitTask,
  getTaskDetails,
  programmaticCreateAd
} from '@/api/ks/programmed.js';
import {
  isString,
  isBoolean
} from "@/utils/types";

export default defineComponent({
  name: 'AdTaskDetails',
  components: {
    CustomTable,
    NoCustomTable,
  },
  /* beforeRouteEnter(to, from, next) {
     !to.query.id ? next({name: 'PlatformKuaishouAdvertising'}) : next();
   },*/
  setup() {
    // const task_id = useRoute().query.id
    // const week = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']
    const initVal = () => {
      return {
        // 半选状态
        indeterminate: computed(() => {
          const checkedList = state.tableData.campaignList.filter(item => item.checked || item.indeterminate);
          let mark = false
          // 不是自定义创建
          if (!state.tableData.is_custom) {
            // checkedList.length < state.tableData.campaignList.length;
            mark = !state.tableData.campaignList.every(parent => parent.unit_list.every(unit => unit.checked))
          } else {
            mark = !state.tableData.campaignList.every(parent => {
              return parent.unit_list.every(unit => unit.ks_creative.every(item => item.checked))
            })
          }
          return !!checkedList.length && mark
        }),
        campaignList: [],
        checkAll: computed({
          get() {
            const checkedList = state.tableData.campaignList.filter(item => item.checked);
            // return !!checkedList.length && checkedList.length === state.tableData.campaignList.length;
            return !!checkedList.length && checkedList.length === state.tableData.campaignList.length
          },
          set(v) {
            state.tableData.campaignList.forEach(parent => {
              if (!parent.disabled) {
                parent.unit_list.forEach((unit, adIndex) => {
                  // 不是自定义创建
                  if (!state.tableData.is_custom) {
                    if (!unit.disabled) unit.checked = v;
                  } else {
                    unit.ks_creative.forEach(ks => {
                      if (!ks.disabled) ks.checked = v;
                    })
                  }
                });
                let checked = 0
                let disabled = 0
                let mark = false
                // 不是自定义创建
                if (!state.tableData.is_custom) {
                  checked = parent.unit_list.filter(item => item.checked).length
                  disabled = parent.unit_list.filter(item => !item.disabled).length
                  mark = !parent.unit_list.every(item => item.checked)
                } else {
                  checked = parent.unit_list.reduce((p, item) => {
                    item.ks_creative.forEach(v => {
                      p += +v.checked
                    })
                    return p
                  }, 0)
                  disabled = parent.unit_list.reduce((p, item) => {
                    item.ks_creative.forEach(v => {
                      p += +!v.disabled
                    })
                    return p
                  }, 0)
                  mark = !parent.unit_list.every(unit => unit.ks_creative.every(item => item.checked))
                }
                // parent.checked = parent.unit_list.every(item => item.checked)
                parent.checked = checked === disabled
                //半选状态
                parent.indeterminate = v ? mark : false
              }
            })
          },
        }),
        // 广告计划数量
        planCount: 0,
        // 定时任务数量
        timedCount: 0,
        // 成功数量
        successCount: 0,
        // 失败数量
        failedCount: 0,
        // 待提交数量
        pendingCount: 0,
        // 非自定义创建广告组数量(自定义创建时为创意数量)
        groupCount: 0,
        // 自定义创建广告组数量
        customGroupCount: 0,
        // 已勾选广告组数量
        selectGroupCount: computed(() => {
          return state.tableData.campaignList.reduce((p, c) => {
            c.unit_list.forEach(item => {
              // 不是自定义创建
              if (!state.tableData.is_custom) {
                p += +item.checked
              } else {
                item.ks_creative.forEach(v => {
                  p += +v.checked
                })
              }
            })
            return p
          }, 0)
        }),
        disabled: computed(() => state.tableData.campaignList.filter(item => item.disabled).length === state.tableData.campaignList.length),
      }
    }
    const state = reactive({
      loading: false,
      tableData: initVal(),
      tableRowLists: [],
      noCustomTableRef: null,
      customTableRef: null,
    })
    let elMsg = null
    let isSlowReq = true
    // 规则分配
    const ruleMap = new Map([
      ['target', '8'],
      ['slogan', '11'],
      ['material', '9'],
      // ['landing_page', '10']
    ])
    const setTaskId = async () => {
      // state.loading = true
      // let {data} = await getTaskDetails({task_id}).finally(() => {
      //   state.loading = false;
      //   isSlowReq = true
      // })
      let data = programmaticData.data
      // 广告计划数量
      state.tableData = initVal()
      data.campaignList = data.campaignList.filter(item => item.unit_list.length)
      state.tableData.planCount = data.campaignList.length
      data.campaignList.forEach(parent => {
        parent.checked = false;
        parent.indeterminate = false;
        parent.unit_list.forEach(unit => {
          // 不是自定义创建
          if (!data.is_custom) {
            unit.disabled = false;
            unit.checked = false;
            state.tableData.groupCount++
            if (unit.submit_status === '定时提交') {
              state.tableData.timedCount++;
            } else if (unit.submit_status === '成功') {
              state.tableData.successCount++;
              unit.disabled = true;
            } else if (unit.submit_status === '失败') {
              state.tableData.failedCount++;
              unit.disabled = true;
            } else if (unit.submit_status === '待提交') {
              state.tableData.pendingCount++;
            }
          } else {
            state.tableData.customGroupCount++
            unit.ks_creative.forEach(item => {
              item.disabled = false;
              item.checked = false;
              state.tableData.groupCount++
              if (item.submit_status === '定时提交') {
                state.tableData.timedCount++;
              } else if (item.submit_status === '成功') {
                state.tableData.successCount++;
                item.disabled = true;
              } else if (item.submit_status === '失败') {
                state.tableData.failedCount++;
                item.disabled = true;
              } else if (item.submit_status === '待提交') {
                state.tableData.pendingCount++;
              }
            })
          }
        })
        // 不是自定义创建
        if (!data.is_custom) {
          // 禁用的长度和总数据长度
          parent.disabled = parent.unit_list.filter(item => item.disabled).length === parent.unit_list.length;
        } else {
          // parent.unit_list.every(item => item.ks_creative.filter(item => item.disabled).length === item.ks_creative.length)
          let num = 0
          let mark = parent.unit_list.reduce((p, item) => {
            // 多个广告组
            if (parent.unit_list.length > 1) {
              num += item.ks_creative.filter(item => item.disabled).length
              p = parent.unit_list.length === num
            } else {
              p = item.ks_creative.filter(item => item.disabled).length === item.ks_creative.length
            }
            return p
          }, false)
          parent.disabled = mark
        }
      })
      Object.assign(state.tableData, data);
      state.tableRowLists = state.tableData.campaignList.reduce((arr, item, aIndex) => {
        item.unit_list.forEach((group, gIndex) => {
          // 不是自定义创建
          if (!state.tableData.is_custom) {
            const span_obj = {
              // campaignList 对应下标
              campaignIndex: aIndex,
              // campaignList下的unit_list 对应下标
              unitIndex: gIndex
            }
            // [1,2] = 合并1行 ,合并2列 0=不显示
            if (gIndex === 0) {
              span_obj['0'] = [state.tableData.campaignList[aIndex].unit_list.length, 1]
              span_obj['1'] = [state.tableData.campaignList[aIndex].unit_list.length, 1]
              span_obj[ruleMap.get(state.tableData.grouping_rule)] = [state.tableData.campaignList[aIndex].unit_list.length, 1]
            } else {
              span_obj['0'] = [0, 0]
              span_obj['1'] = [0, 0]
              span_obj[ruleMap.get(state.tableData.grouping_rule)] = [0, 0]
            }
            arr.push(span_obj)
          } else {
            group.ks_creative.forEach((custom, index) => {
              const span_obj = {
                // campaignList 对应下标
                campaignIndex: aIndex,
                // campaignList下的unit_list 对应下标
                unitIndex: gIndex,
                // campaignList下的unit_list的ks_creative对应下标
                customIndex: index
              }
              // [1,2] = 合并1行 ,合并2列 0=不显示
              let len = item.unit_list.length > 1 ? item.unit_list.length : group.ks_creative.length
              if (index === 0 && gIndex === 0) {
                // 多个广告组
                if (item.unit_list.length > 1) {
                  span_obj['0'] = [len, 1]
                  span_obj['1'] = [len, 1]
                  span_obj['5'] = [1, 1]
                  span_obj['6'] = [1, 1]
                  span_obj['7'] = [1, 1]
                  span_obj[ruleMap.get(state.tableData.grouping_rule)] = [len, 1]
                } else {
                  span_obj['0'] = [len, 1]
                  span_obj['1'] = [len, 1]
                  span_obj['5'] = [len, 1]
                  span_obj['6'] = [len, 1]
                  span_obj['7'] = [len, 1]
                  span_obj[ruleMap.get(state.tableData.grouping_rule)] = [len, 1]
                }
              } else {
                // 多个广告组
                if (item.unit_list.length > 1) {
                  span_obj['0'] = [0, 0]
                  span_obj['1'] = [0, 0]
                  span_obj['5'] = [1, 1]
                  span_obj['6'] = [1, 1]
                  span_obj['7'] = [1, 1]
                  span_obj[ruleMap.get(state.tableData.grouping_rule)] = [0, 0]
                } else {
                  span_obj['0'] = [0, 0]
                  span_obj['1'] = [0, 0]
                  span_obj['5'] = [0, 0]
                  span_obj['6'] = [0, 0]
                  span_obj['7'] = [0, 0]
                  span_obj[ruleMap.get(state.tableData.grouping_rule)] = [0, 0]
                }
              }
              arr.push(span_obj)
            })
          }
        })
        return arr
      }, [])
    }
    setTaskId()
    // 要渲染多少个 tr
    /*watch(() => state.tableData.campaignList, val => {
      state.tableRowLists = val.reduce((arr, item, aIndex) => {
        item.unit_list.forEach((group, gIndex) => {
          // 不是自定义创建
          if (!state.tableData.is_custom) {
            const span_obj = {
              // campaignList 对应下标
              campaignIndex: aIndex,
              // campaignList下的unit_list 对应下标
              unitIndex: gIndex
            }
            // [1,2] = 合并1行 ,合并2列 0=不显示
            if (gIndex === 0) {
              span_obj['0'] = [state.tableData.campaignList[aIndex].unit_list.length, 1]
              span_obj['1'] = [state.tableData.campaignList[aIndex].unit_list.length, 1]
              span_obj[ruleMap.get(state.tableData.grouping_rule)] = [state.tableData.campaignList[aIndex].unit_list.length, 1]
            } else {
              span_obj['0'] = [0, 0]
              span_obj['1'] = [0, 0]
              span_obj[ruleMap.get(state.tableData.grouping_rule)] = [0, 0]
            }
            arr.push(span_obj)
          } else {
            group.ks_creative.forEach((custom, index) => {
              const span_obj = {
                // campaignList 对应下标
                campaignIndex: aIndex,
                // campaignList下的unit_list 对应下标
                unitIndex: gIndex,
                // campaignList下的unit_list的ks_creative对应下标
                customIndex: index
              }
              // [1,2] = 合并1行 ,合并2列 0=不显示
              if (index === 0) {
                let len = group.ks_creative.length
                span_obj['0'] = [len, 1]
                span_obj['1'] = [len, 1]
                span_obj['5'] = [len, 1]
                span_obj['6'] = [len, 1]
                span_obj['7'] = [len, 1]
                span_obj[ruleMap.get(state.tableData.grouping_rule)] = [len, 1]
              } else {
                span_obj['0'] = [0, 0]
                span_obj['1'] = [0, 0]
                span_obj['5'] = [0, 0]
                span_obj['6'] = [0, 0]
                span_obj['7'] = [0, 0]
                span_obj[ruleMap.get(state.tableData.grouping_rule)] = [0, 0]
              }
              arr.push(span_obj)
            })
          }
        })
        return arr
      }, [])
    }, {deep: true})*/
    const submitDataHandler = debounce(async () => {
      if (isSlowReq) {
        elMsg && elMsg.close()
        if (!state.tableData.indeterminate && !state.tableData.checkAll) {
          elMsg = ElMessage.warning(`请选择${!state.tableData.is_custom ? '广告组' : '广告创意'}`);
          return;
        }
        let tmpData = cloneDeep(state.tableData);
        Object.keys(tmpData).forEach(k => {
          if (!['advertiser_alias', 'advertiser_id', 'batch_id', 'campaignList', 'grouping_rule', 'is_custom', 'marketing_goals'].includes(k)) {
            Reflect.deleteProperty(tmpData, k)
          }
        })
        tmpData.campaignList.forEach(campaign => {
          Object.keys(campaign).forEach(k => {
            // 移除空值和布尔值 属性
            if ((isString(campaign[k]) && !campaign[k].trim().length) || isBoolean(campaign[k])) {
              Reflect.deleteProperty(campaign, k)
            }
          })
          // 不是自定义创建
          if (!state.tableData.is_custom) {
            campaign.unit_list = campaign.unit_list.filter(item => {
              // return item.checked && (item.submit_status === '待提交' || (item.submit_status === '定时提交' && Date.now() < new Date(state.tableData.task_submit_time).getTime()))
              return item.checked
            })
          } else {
            campaign.unit_list = campaign.unit_list.filter(item => {
              // return item.ks_creative.some(v => v.checked && Date.now() < new Date(state.tableData.task_submit_time).getTime())
              return item.ks_creative.some(v => v.checked)
              /*return item.ks_creative.some(v => {
                return v.checked && (v.submit_status === '待提交' || (v.submit_status === '定时提交' && Date.now() < new Date(state.tableData.task_submit_time).getTime()))
              })*/
            })
          }
          campaign.unit_list.forEach(item => {
            // 移除空值和布尔值 属性
            Object.keys(item).forEach(k => {
              if ((isString(item[k]) && !item[k].trim().length) || isBoolean(item[k])) {
                Reflect.deleteProperty(item, k)
              }
              if (k === 'submit_status') {
                Reflect.deleteProperty(item, k)
              }
            })
            // 自定义创建
            if (state.tableData.is_custom) {
              item.ks_creative = item.ks_creative.filter(item => {
                // return item.checked && (item.submit_status === '待提交' || (item.submit_status === '定时提交' && Date.now() < new Date(state.tableData.task_submit_time).getTime()))
                return item.checked
              })
              item.ks_creative.forEach(ks => {
                Object.keys(ks).forEach(k => {
                  // 移除空值和布尔值 属性
                  if ((isString(ks[k]) && !ks[k].trim().length) || isBoolean(ks[k])) {
                    Reflect.deleteProperty(ks, k)
                  }
                  if (k === 'submit_status') {
                    Reflect.deleteProperty(item, k)
                  }
                })
              })
            }
          })
        })
        /*let flag = true
        // 不是自定义创建
        if (!state.tableData.is_custom) {
          tmpData.campaignList = tmpData.campaignList.filter(item => item.unit_list.length)
          flag = tmpData.campaignList.some(item => item.unit_list.length)
        } else {
          tmpData.campaignList = tmpData.campaignList.filter(item => item.unit_list.some(v => v.ks_creative.length))
          flag = tmpData.campaignList.some(item => item.unit_list.some(v => v.ks_creative.length))
        }
        if (!flag) {
          elMsg = ElMessage.warning('请选择没超过定时时间或待提交的任务');
          return
        }*/
        elMsg = ElMessage.success('提交中请稍等...');
        isSlowReq = false
        let {message} = await programmaticCreateAd([tmpData]).finally(_ => {
          elMsg && elMsg.close()
          isSlowReq = true
        })
        elMsg = ElMessage.success(message);
        updAuditStatusHandler()
      }
    }, 300)

    const batchCancelHandler = debounce(async (mark, index_list) => {
      if (isSlowReq) {
        let params = index_list
        elMsg && elMsg.close()
        if (mark) {
          params = state.tableData.campaignList.reduce((p, c) => {
            c.unit_list.forEach(item => {
              // 不是自定义创建
              if (!state.tableData.is_custom) {
                if (item.checked && item.submit_status === '定时提交') {
                  p.push({
                    campaign_index: c.campaign_index,
                    unit_index: item.unit_index
                  })
                }
              } else {
                item.ks_creative.forEach(ks => {
                  if (ks.checked && ks.submit_status === '定时提交') {
                    p.push({
                      campaign_index: c.campaign_index,
                      unit_index: item.unit_index,
                      creative_index: ks.creative_index
                    })
                  }
                })
              }
            })
            return p
          }, [])
          if (!params.length) {
            elMsg = ElMessage.warning('请选择定时任务');
            return;
          }
        }
        // if (new Date(state.tableData.task_submit_time).getTime() + 1000 >= new Date(state.tableData.task_submit_time).getTime()) {
        if (Date.now() >= new Date(state.tableData.task_submit_time).getTime()) {
          elMsg = ElMessage.warning('已过定时时间，不能取消');
          return;
        }
        try {
          await ElMessageBox.confirm(
            `该操作不可恢复，确定${params.length === 1 ? '取消该' : '批量取消'}定时任务吗？`,
            '警告',
            {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
            }
          )
          isSlowReq = false
          let {message} = await cancelSubmitTask({
            index_list: params,
            task_id
          }).finally(_ => {
            isSlowReq = true
          })
          elMsg && elMsg.close()
          elMsg = ElMessage.success(message);
          updAuditStatusHandler()
        } catch (e) {
          isSlowReq = true
          console.log(e)
        }
      }
    }, 300)

    const updAuditStatusHandler = debounce(() => {
      if (isSlowReq) {
        isSlowReq = false
        setTaskId()
      }
    }, 300)
    // 删除任务
    const delTask = debounce(async (params, campaignIndex, unitIndex, customIndex) => {
      try {
        await ElMessageBox.confirm(
          `该操作不可恢复，确定删除吗？`,
          '警告',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }
        )
        let {message} = await delSubmitTask({
          ...params,
          task_id
        })
        elMsg && elMsg.close()
        elMsg = ElMessage.success(message);
        /*// 不是自定义创建
        if (!state.tableData.is_custom) {
          state.tableData.campaignList[campaignIndex].unit_list.splice(unitIndex, 1)
        } else {
          state.tableData.campaignList[campaignIndex].unit_list[unitIndex].ks_creative.splice(customIndex, 1)
        }*/
        updAuditStatusHandler()
      } catch (e) {
        console.log(e)
      }
    }, 300)

    return {
      ...toRefs(state),
      delTask,
      submitDataHandler,
      batchCancelHandler,
      updAuditStatusHandler,
      // week,
    }
  },
});
</script>

<style lang="scss" scoped>
:deep(.el-table--border th:first-child .cell) {
  padding-left: 10px;
}

:deep(.el-table--border td , .el-table--border th ) {
  border-right: 1px solid #dedede !important;
  border-bottom: 1px solid #dedede !important;
}

:deep(.el-table) {
  display: flex;
  flex-direction: column;
  flex: 1;

  .el-table--border td:first-child .cell,
  .el-table__body tr td:first-child .cell {
    padding-left: 10px;
  }

  td:not(:last-of-type) {
    border-right: 1px solid #f2f2f2;
  }

  .el-table__body-wrapper {
    flex: 1;
    overflow-y: overlay;
  }

  thead.is-group {
    th {
      background: #fff;
    }
  }
}

.section-task-details {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0 10px 10px;
  width: 100%;
  height: 100%;
  @include pageSection();
  font-size: 14px;

  .section-task-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding-top: 20px;
    padding-bottom: 20px;
    color: $h1-text-color;

    > .task-form-item {
      & + .task-form-item {
        margin-left: 20px;
      }

      :deep(.el-checkbox__label) {
        color: $h1-text-color;
      }
    }
  }

  .table-count {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #dedede;
  }

  .task-detail-header {
    flex-shrink: 0;
    display: flex;
    padding: 15px 20px;
    color: $h1-text-color;

    > .task-form-item {

      & + .task-form-item {
        margin-left: 20px;
      }

      :deep(.el-checkbox__label) {
        color: $h1-text-color;
      }
    }
  }

  > div {
    display: flex;
    flex-direction: column;
    flex: 1;
    border-bottom: none;
    overflow: hidden;
  }
}

.campaign-name {
  & + .campaign-name {
    margin-top: 1em;
  }

  .strong-text {
    margin-bottom: .25em;
  }
}
</style>

<style lang="scss">
.creative_detail {
  width: auto !important;

  .creative_detail_content {
    max-height: 360px;
    overflow: auto;

    .creative_detail_content_item {
      margin-bottom: 20px;

      &:last-child {
        margin-bottom: 0;
      }

      .creative_detail_content_item_title {
        margin-bottom: 10px;
        font-weight: 700;
      }
    }
  }

  .creative_detail_content_material {
    .creative_detail_content_material_item {
      display: inline-block;
      margin-right: 15px;

      &:last-child {
        margin-right: 0;
      }

      .material {
        width: 200px;
        height: 112px;
        text-align: center;
        background: #dedede;
        margin-top: 10px;
        cursor: pointer;

        img, video {
          max-width: 100%;
          max-height: 100%;
        }
      }

      .sticker_styles {
        width: 102px;
        height: 112px;
      }
    }
  }

  .creative_detail_content {
    .creative_detail_slogan_item {
      margin-top: 10px;
    }
  }
}

.layout-header[name="PlatformKuaishouAdvertisingTaskDetails"] {
  > .layout-header-menu {
    display: none;
  }
}
</style>
